import QtQuick 2.0

Rectangle {
    id: root

    property alias icon: image.source
    signal clicked()

    width: 24
    height: 24

    Image {
        id: image
        anchors.centerIn: parent
        width: parent.width * 0.8; height: parent.height * 0.8
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
        hoverEnabled: true
        onClicked: root.clicked()
    }

    states: [
        State {
            name: "normal"
            when: !mouse.containsMouse
            PropertyChanges { target: root; color: "transparent"; }
        },
        State {
            name: "hovered"
            when: mouse.containsMouse && !mouse.pressed
            PropertyChanges { target: root; color: "#666"; }
        },
        State {
            name: "pressed"
            when: mouse.pressed
            PropertyChanges { target: root; color: "#333"; }
        }
    ]
}
